import {ITodoItem} from "../../App.tsx";
import TodoItemArea from "../TodoItemArea";

type IProps = {
    list: ITodoItem[];
    onItemComplete: (id: string) => void;
    onEditItem: (id: string, title: string) => void;
};

const TodoListArea = ({list, onItemComplete, onEditItem}: IProps) => {
    // const [draggedItemId, setDraggedItemId] = useState<string | null>(null);
    // const [items, setItems] = useState(list); // 维护本地状态以便拖拽排序

    // const handleDragStart = (id: string) => {
    //     setDraggedItemId(id);
    // };
    //
    // const handleDragOver = (e: DragEvent) => {
    //     e.preventDefault();
    // };
    //
    // // 拖拽放下时，更新顺序
    // const handleDrop = (e: DragEvent, targetId: string) => {
    //     e.preventDefault();
    //     // 找到被拖拽项的位置和目标项的位置
    //     const draggedItemIndex = items.findIndex(item => item.id === draggedItemId);
    //     const targetItemIndex = items.findIndex(item => item.id === targetId);
    //     // 交换顺序
    //     const newItems = [...items];
    //     const [removedItem] = newItems.splice(draggedItemIndex, 1);
    //     newItems.splice(targetItemIndex, 0, removedItem);
    //     setItems(newItems); // 更新列表顺序
    //     setDraggedItemId(null); // 清空拖拽状态
    // };

    return (
        <>
            {list.map((item) =>
                !item.hasCompleted ? (
                    <TodoItemArea
                        key={item.id}
                        data={item}
                        onItemComplete={onItemComplete}
                        onEditItem={onEditItem.bind(null, item.id)}
                    />
                ) : null,
            )}
        </>
    );
};

export default TodoListArea;
